<template>
    <div class="other-top-head head-fixed" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
        <div class="navbar-wrap">
            <div class="new-nav-page scroll-white" style="width: 100%">
                <headerCon></headerCon>
            </div>
        </div>
    </div>
    <div class="error-404 clearfix">
        <div class="error-content">
            <img src="https://static.3d66.com/www3/src/assets/images/404/404.png" alt="">
            <div class="err-right">
                <div class="err-title">抱歉，你访问的页面不存在！ </div>
                <a class="err-home" href="https://www.3d66.com/"><em>{{complete}}%</em>返回首页</a>
               
            </div>
        </div>
    </div>

    <footerContent></footerContent>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import headerCon from "../../../components/header.vue";
import { useRouter } from 'vue-router'
import { useSiteConfig } from '../../../stores/siteConfig'
import footerContent from "../../../components/footerContent.vue";
const siteConf = useSiteConfig()

const router = useRouter()
const complete = ref(0)
var timer: any = null

function process() {
    complete.value += Math.floor(Math.random() * 50)
    if (complete.value >= 100) {
        complete.value = 100
         router.back()
    } else {
        processInterval()
    }
}

function processInterval() {
    timer = setTimeout(process, Math.random() * (1000 - 500) + 500)
}

onMounted(() => {
    processInterval()
})
onBeforeUnmount(() => {
    clearTimeout(timer)
})
</script>

<style scoped lang="scss">

.error-404 {
    width: 960px;
    height: calc(100vh - 282px);
    position: relative;
    margin: 0 auto;
}
.error-content {
    width: 960px;
    height: 364px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.error-404 img {
    width: 210px;
    height: 364px;
    float: left;
    margin-left: 80px;
    margin-right: 72px;
}
.err-right {
    float: left;
    display: grid;
    height: 364px;
    align-content: center;
}
.err-right .err-title {
    font-size: 32px;
    font-weight: 400;
    color: #4E5969;
    line-height: 36px;
    margin-top: 20px;
}
.err-right .err-home {
    width: 127px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #06CD65;
    font-size: 14px;
    font-weight: 400;
    color: #06CD65;
    display: block;
    margin-top: 24px;
}
.err-right .err-home em {
    color: #F53F3F;
    margin-right: 2px;
}
.err-hint {
    margin-top: 24px;
}
.err-hint b {
    font-size: 16px;
    font-weight: bold;
    color: #4E5969;
    line-height: 32px;
}
.err-hint p {
    font-size: 16px;
    font-weight: 400;
    color: #86909C;
    line-height: 32px;
}
.err-hint p a {
    color: #06CD65;
    cursor: pointer;
}
.err-hint p a {
    color: #06CD65;
    cursor: pointer;
}
.err-hint p.err-child {
    padding-left: 24px;
    position: relative;
}
@media screen and (max-width: 720px) {
    .container {
        width: 90vw !important;
    }

    .tip {
        font-size: 20px !important;
        padding-top: 20px;
    }

    .complete {
        font-size: 20px !important;
        padding: 30px 0;
    }

    .stopcode-text {
        font-size: 15px !important;
    }
}
</style>
